header{
	background-color: #e8f3f5;
}
header>div{
	height: 824px;
	background: url(../images/oshin-slide-1.jpg) no-repeat;
	background-size: 100% 100%;
	
}
header>div ul{
	padding-left: 223px;
	position: relative;
}
header>div ul::before{
	content: "";
	width: 118px;
	height: 50px;
	background: url(../images/oshin-black-logo.png) no-repeat;
	position: absolute;
	left: 30px;
	top: 25px;
}
header>div ul li{
	margin-right: 42px;
}
header>div ul div{
	margin-left: 33px;
	margin-top: 35px;
}
header>div ul li a{
	display: block;
	line-height: 99px;
	font-size: 7px;
	font-weight: bold;
	letter-spacing:2px;
	word-spacing: 6px;
	color: #494a4a;
}
header>div ul div a:nth-child(2){
	margin-right: 22px;
	margin-left: 22px;
}
header>div ul li a:hover{
	color: #e0a240;
	transform: scale(1.2);
}
header>div ul div a:hover{
	color:#e0a240;
	animation: ha 1s infinite;
}
@keyframes ha{
				0%{
					transform:rotate(0deg);
				}
				25%{
					transform:rotate(90deg);
				}
				50%{
					transform:rotate(180deg);
				}
				75%{
					transform:rotate(270deg);
				}
				100%{
					transform:rotate(360deg);
				}
			}
.mid{
	padding-top: 270px;
	padding-bottom: 256px;
	text-align: center;
}
.text1{
	line-height: 80px;
	color: #222222;
	letter-spacing: 7px;
	word-spacing: 19px;
	width:351px;
	animation:mt 3s 1 forwards;
}
@keyframes mt{
				0%{
					
				}
				100%{
				     transform: translate(420px,0px);
				}
			}
.box{
	border: 7px solid #000000;
	width:351px;
	margin-left: 405px;
	line-height: 102px;
	font-size: 29px;
	color: #000000;
	font-weight: bold;
	letter-spacing: 10px;
}
.text2{
	line-height: 110px;
	color: #222222;
	width: 500px;
	letter-spacing: 7px;
	word-spacing: 19px;
	animation:mt2 3s 1 forwards;
}
@keyframes mt2{
				0%{
					transform: translate(1200px);
				}
				100%{
				     transform: translate(350px);
				}
			}
/* 以下是main区域 */
.main{
	
}
.introduce{
	padding-top: 78px;
	text-align: center;
}
.introduce h1{
	line-height: 68px;
	font-size: 27px;
	word-spacing: 8px;
	letter-spacing: 1px;
	color: #222226;
}
.introduce h2{
	line-height: 67px;
	font-size: 7px;
	word-spacing: 4px;
	color: #5f6297;
	margin-bottom: 22px;
}
.y{
	width: 7px;
	height: 7px;
	background-color: #e0a240;
	transform: rotate(45deg);
	margin: 0 auto;
	position: relative;
}
.y::before{
	content: "";
	width: 20px;
	height: 1px;
	border: 1px solid #e8e8e8;
	background-color: #e8e8e8;
	transform: rotate(135deg);
	position: absolute;
	top:25px;
	left: -30px;
}
.y::after{
	content: "";
	width: 20px;
	height: 1px;
	border: 1px solid #e8e8e8;
	background-color: #e8e8e8;
	transform: rotate(135deg);
	position: absolute;
	bottom:25px;
	left:15px;
}
.introduce p{
	padding-top: 37px;
	padding-bottom: 100px;
	line-height: 32px;
	font-size: 10px;
	word-spacing:5px;
	color: #626263;
	width: 620px;
	margin: 0 auto;
}
.introduce img{
	margin: 0 auto;
}
.icons{
	
}
.icon{
	padding-top: 62px;
	width: 320px;
	height: 245px;
}
.icon div{
	
}
.icon h1{
	line-height: 53px;
	font-size: 11px;
	word-spacing: 5px;
	color: #0d0500;
}
.icon:nth-child(2n+1){
	background-color: #f2f5f8;
}
.icon:nth-child(2n){
	background-color: #edf0f2;
}
.phone{
	margin-top: 90px;
	background: url(../images/iphone-oshin-513x1024.png) no-repeat top center;
	background-size: 333px 690px;
	height: 875px;
	margin-bottom: 100px;
}
.phone div{
	padding-left: 61px;
	width: 334px;
	height: 200px;
}
.phone div:nth-child(2n+1){
	margin-right: 414px;
}
.phone div h1{
	padding-top: 21px;
	padding-left: 59px;
	line-height: 51px;
	font-size: 13px;
	word-spacing: 5px;
	color: #462323;
	position: relative;
}
.phone div h1 i{
	position: absolute;
	left: 0px;
	top: 31px;
}
.phone div p{
	padding-left: 50px;
	line-height: 26px;
	word-spacing: 3px;
	font-size: 7px;
	color: #6e7172;
}
.work{
	text-align: center;
}
.sticky{
	background: url(../images/wanderlust01.jpg) no-repeat fixed;
	background-size: 100% 100%;
	/* top: 0; */
	height: 400px;
}
.work h1{
	padding-top: 78px;
	line-height: 68px;
	font-size: 27px;
	word-spacing: 8px;
	letter-spacing: 1px;
	color: #222226;
}
.work h2{
	line-height: 67px;
	font-size: 7px;
	word-spacing: 4px;
	color: #5f6297;
	margin-bottom: 22px;
}
.ad{
	padding-top: 85px;
}
.ad_title{
	
}
.ad_title ul{
	padding-bottom: 50px;
	width: 600px;
	margin: 0 auto;
}
.ad_title ul li{

	margin-right: 26px;
}
.ad_title ul li a{
	display: block;
	line-height:42px;
	font-size: 10px;
	padding-left: 19px;
	padding-right: 18px;
}
.ad_title ul li a:hover{
	color:#e0a240;
	border: 1px solid #e0a240;
}
.ad_photos{
	padding-left: 40px;
}
.ad_photos div{
	margin-right: 40px;
	margin-bottom: 40px;
}
.ad_photos div img{
	width: 373px;
	height: 220px;
}
.view{
	width: 158px;
	border:2px solid #000000;
	margin:0px auto 90px auto ;
}
.view a{
	display: block;
	line-height: 44px;
	font-size: 9px;
	word-spacing: 5px;
	color: #131c1c;
}
.end{
	background-color: #f2f3f8;
	padding-top: 98px;
	padding-bottom: 80px;
}
.end div:nth-child(1){
	padding-bottom: 19px;
}
.end h1{
	line-height: 46px;
	font-size: 12px;
	word-spacing: 5px;
}
.end a{
	display: block;
	line-height: 39px;
	color: #e0a452;
	font-size: 17px;
}
.end h2{
	line-height: 51px;
	font-size: 11px;
	color: #2e2226;
}
.clients{
	text-align: center;
}
.clients h1{
	padding-top: 78px;
	line-height: 68px;
	font-size: 27px;
	word-spacing: 8px;
	letter-spacing: 1px;
	color: #222226;
}
.clients h2{
	line-height: 67px;
	font-size: 7px;
	word-spacing: 4px;
	color: #5f6297;
	margin-bottom: 22px;
}
.pic{
	padding-top:85px;
	padding-bottom:90px;
	padding-left: 10px;
}
.pic div:nth-child(1){
	margin-right: 20px;	
}
.pic div img{
	width: 614px;
	height: 464px;
}
.buy{
	text-align: center;
	background-color: #000000;
	padding-bottom: 90px;
}
.buy h1{
	padding-top: 78px;
	line-height: 68px;
	font-size: 27px;
	word-spacing: 8px;
	letter-spacing: 1px;
	color: #ffffff;
}
.buy h2{
	line-height: 67px;
	font-size: 7px;
	word-spacing: 4px;
	color: #faf1cd;
	margin-bottom: 22px;
}
.bn{
	width: 158px;
	background-color: #f0b452;
	margin:0px auto 90px auto ;
}
.bn a{
	display: block;
	line-height: 44px;
	font-size: 9px;
	word-spacing: 5px;
	color: #fef8cd;
}
/* 底部区域 */
.area{
	padding:70px 51px 70px 60px;
	background-color: #f2f3f8;
}
.oshin{
	width: 305px;
}
.oshin p{
	padding-top: 30px;
	line-height: 24px;
	font-size: 8px;
	word-spacing: 4px;
	color: #838383;
}
.pile{
	padding-top:30px;
	padding-bottom: 37px;
}
.pile div{
	margin-right: 13px;
}
.recent{
	width: 305px;
}
.recent>h1{
	line-height: 21px;
	font-size: 8px;
	letter-spacing: 2px;
	word-spacing: 6px;
	color: #47474d;
	padding-bottom: 21px;
}
.post{
	position: relative;
}
.post::before{
	content: "";
	width: 50px;
	height: 33px;
	background:url(../images/oshin-ipad-mock-50x34.jpg) no-repeat;
	position: absolute;
	top: 6px;
}
.post h1{
	padding-left: 60px;
	line-height: 24px;
	font-size: 9px;
	color: #919190;
	word-spacing: 4px;
}
.post h2{
	padding-left: 60px;
	line-height: 27px;
	font-size: 10px;
	word-spacing: 3px;
	color: #919190;
}
.recent>h3{
	line-height: 18px;
	padding-bottom: 6px;
	font-size: 4px;
	color: #919190;
}
.recent>h4{
	line-height:29px;
	font-size: 7px;
	color: #919190;
	padding-bottom: 22px;
}
.post2{
	position: relative;
}
.post2::before{
	content: "";
	width: 50px;
	height: 33px;
	background:url(../images/responsive-road-50x36.jpg) no-repeat;
	position: absolute;
	top: 6px;
}
.post2 h1{
	padding-left: 60px;
	line-height: 24px;
	font-size: 9px;
	color: #919190;
	word-spacing: 4px;
}
.post2 h2{
	padding-left: 60px;
	line-height: 27px;
	font-size: 10px;
	word-spacing: 3px;
	color: #919190;
}
.links{
	width: 305px;
}
.links>h1{
	line-height: 21px;
	font-size: 8px;
	letter-spacing: 2px;
	word-spacing: 6px;
	color: #47474d;
	padding-bottom: 31px;
}
.links ul{
	
}
.links ul li{
	padding-bottom: 20px;
	position: relative;
}
.links ul li::before{
	content: '';
	width: 4px;
	height: 6px;
	border: 2px solid black;
	border-left-color:transparent ;
	border-bottom-color: transparent;
	transform: rotate(45deg);
	position: absolute;
	top: 4px;
	left: 4px;
}
.links ul li a{
	padding-left: 24px;
	font-size: 9px;
	color: #818383;
	line-height: 9px;
}
.links ul li a:hover{
	color: #ebba4b;
}
.from{
	width: 255px;
}
.from>h1{
	line-height: 21px;
	font-size: 8px;
	letter-spacing: 2px;
	word-spacing: 6px;
	color: #47474d;
	padding-bottom: 31px;
}
.smg{
	
}
.smg div{
	margin-right: 15px;
	margin-bottom: 15px;
}
.smg div img{
	width: 69px;
	height: 70px;
}
.copy{
	line-height: 70px;
	font-size: 9px;
	color: #9d9393;
	text-align: center;
}
